<template>
  <div class="search">
    <div class="search-box">
      <img src="" alt="">
      <input
        type="text"
        placeholder="搜索歌曲、歌手、专辑"
        v-model="keywords"
        v-throttle="search">
    </div>
    <div class="search-suggest" v-if=" keywords !== '' ">
    <Scroll>
    <ul>
      <li v-for="value in songs" :key='value.id' @click.stop="selectMusic(value.id)">
      <img src="" alt="">
      <p>{{value.name}} - {{value.artists[0].name}}</p>
      </li>
    </ul>
    </Scroll>
    </div>
    <div class="hot" >
      <h3>热门推荐</h3>
      <ul >
        <li
          v-for="value in hotSongs"
          :key='value.first'
          @click.stop="hotSearch(value.first)"
          >{{value.first}}</li>
      </ul>
    </div>
    <ul class="searchHistory">
      <h3>搜索历史</h3>
      <li
        v-for="(value, index) in searchHistory"
        :key="index">
        <div class="searchHistory-left">
          <img src="" alt="">
        </div>
        <p>{{value}}</p>
        <div class="searchHistory-right">
          <img @click.stop="delHistory(value)" src="" alt="">

        </div>
        </li>
    </ul>
  </div>
</template>

<script>
import Scroll from '../components/scrollview'
import { getSearch, getHot } from '../api/index'
import { mapActions } from 'vuex'
import { setLocalStorage, getLocalStorage } from '../components/tools/tools'
export default {
  name: 'search',
  components: {
    Scroll
  },
  data () {
    return {
      keywords: '',
      songs: [],
      hotSongs: [],
      searchHistory: []
    }
  },
  methods: {
    search () {
      if (this.keywords !== '') {
        getSearch(this.keywords)
          .then(data => {
            this.songs = data.result.songs
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    hotSearch (song) {
      this.keywords = song
      this.search()
    },
    ...mapActions([
      'setFullScreen',
      'setSongDetails'
    ]),
    selectMusic (id) {
      this.setFullScreen(true)
      this.setSongDetails([id])
      if (this.searchHistory.includes(this.keywords)) {
        return
      } else {
        this.searchHistory.push(this.keywords)
      }
      setLocalStorage('searchHistory', this.searchHistory)
      this.keywords = ''
    },
    delHistory (value) {
      this.searchHistory = this.searchHistory.filter((item) => {
        return item !== value
      })
      setLocalStorage('searchHistory', this.searchHistory)
    }
  },
  directives: {
    throttle: {
      // 指令的定义
      inserted: function (el, obj) {
        let pre = 0
        el.addEventListener('input', function () {
          let now = new Date()
          if (now - pre > 1000) {
            obj.value()
            pre = now
          }
        })
      }
    }
  },
  created () {
    getHot()
      .then(data => {
        this.hotSongs = data.result.hots
        // console.log(data)
      })
      .catch(err => {
        console.log(err)
      })
    // 获取搜索历史
    if (getLocalStorage('searchHistory') === undefined || getLocalStorage('searchHistory') === null) {
      return
    }
    this.searchHistory = getLocalStorage('searchHistory')
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/variable";
@import "../assets/css/mixin";
.search{
  position: fixed;
  top: 184px;
  left: 0;
  right: 0;
  bottom: 0;
  @include bg_sub_color();
  .search-box{
    display: flex;
    align-items: center;
    margin: 40px 20px;
    background: #ebecec;
    border-radius: 30px;
    // border-bottom: 1px solid #ccc;
    img {
    width: 40px;
    height: 40px;
    margin-left: 20px;
    }
    input{
      border: none;
      outline: none;
      background: transparent;
      @include font_size($font_medium);
      height: 60px;
      margin-left: 20px;
    }
  }
  .search-suggest{
    position: fixed;
    top: 300px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
    @include bg_sub_color();
    li{
      padding: 20px 35px;
      display: flex;
      align-content: center;
      border-bottom: 1px solid #ccc;
      box-sizing: border-box;
      img{
        width: 40px;
        height: 40px;
      }
      p{
        margin-left: 20px;
        @include font_size($font_medium);
        @include font_color();
      }
    }
  }
  .hot{
    h3{
      padding: 20px 35px;
      @include font_color();
      @include font_size($font_medium);
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding:0 25px;
      li{
        height: 50px;
        line-height: 50px;
        border: 2px solid #ccc;
        padding: 2px 20px;
        margin:10px 30px 0 0;
        border-radius: 20px;
        @include font_size($font_medium_s);
        @include font_color();
      }
    }
  }
  .searchHistory{
    h3{
      padding: 20px 35px;
      @include font_color();
      @include font_size($font_medium);
    }
    li{
      padding: 20px 35px;
      display: flex;
      align-content: center;
      border-bottom: 1px solid #ccc;
      box-sizing: border-box;
      img{
        width: 40px;
        height: 40px;
      }
      p{
        margin-left: 20px;
        @include font_size($font_medium);
        @include font_color();
      }
      .searchHistory-right{
        position: absolute;
        right: 40px;
        img{
          width: 30px;
          height: 30px;
        }
      }
    }
  }
}
</style>
